<template>
    <div>
        <!-- 标题 -->
        <div class="title">
            <h3>
                {{workTest.title}}
            </h3>
            <p class="scores" v-if="totalllscores != null">你的得分:<span>{{totalllscores}}</span></p>
            <p>
                测试范围：第{{workTest.startRange}}章-第{{workTest.endRange}}章
            </p>
        </div>

        <h3 class="zhuyi">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            注意：上传文件时请将java代码使用文本文件（后缀名为txt）文件保存并上传，
            如果有多个java代码，请将他们分别按照顺序保存在一个文本文件中，要求，写上必要的注释，层次分明，代码结构逻辑清除。
        </h3>
        <span class="outTime" v-if="workTest.timeOut === 1">已经超过答题时间，不能答题</span>
        <!-- 主体for循环 -->
        <div v-for="(item,index) in workTest.workTest2BOList" :key="index" class="baby">
            <p>
                第{{index+1}}题：{{item.description}}&nbsp;;【{{item.score}}分】
            </p>
            <el-upload action="http://127.0.0.1:8001/student/submitTest2" :disabled = "pricesum"
                :data={classId:classId,workId:workId,userId:userId,order:index+1} :on-success="handleSuccess"
                :before-upload="beforeUpload" :show-file-list="false">
                <!-- v-if="workTest.timeOut === 0" -->
                <el-button>选择文件</el-button>
            </el-upload>
            <el-tag v-if="scores[index] == -2" type="danger">未提交</el-tag>
            <el-tag v-else-if="scores[index] == -1" type="danger">未批改</el-tag>
            <el-tag v-else type="success">{{scores[index]}}分</el-tag>
            <span v-if="scores[index]>0" class="notAnswer">&nbsp;&nbsp;&nbsp;&nbsp;已经打分不能进行答题</span>
        </div>
    </div>
</template>

<script>
    export default {
        computed: {
            pricesum() {
                if (this.workTest.timeOut === 1) {
                    return true
                }
                if (this.scores != null && this.scores[0] >= 0) {
                    return true
                }
                return false
            },
            totalllscores(){
                if (this.scores != null) {
                    let score = 0;
                    for (let i = 0; i < this.scores.length; i++) {
                        if(this.scores[i]>=0){
                            score = score + this.scores[i]
                        }
                    }
                    return score
                }
                return null;
            }
        },
        created() {
            this.classId = Number(window.sessionStorage.classId)
            this.workId = this.$route.params.id
            this.userId = Number(window.sessionStorage.userId);
            this.getTest2()
        },
        data() {
            return {
                classId: null,
                workId: null,
                userId: null,
                workTest: {
                    title: null
                },
                scores: null,
            };
        },
        methods: {
            // 获取题目数据
            async getTest2() {
                const { data: res } = await this.$axios.get('/getTestWork2', {
                    params: {
                        workId: this.workId,//试卷id
                        classId: Number(window.sessionStorage.classId)
                    }
                })
                if (res.code === 200) {
                    this.workTest = res.data
                    this.getSubmiss()
                } else {
                    return this.$message.error("网络错误")
                }
            },
            // 文件上传
            beforeUpload(file) {
                if (this.workTest.timeOut === 1) {
                    return this.$message.error("已经超过答题时间")
                }
                if (this.scores != null && this.scores[0] >= 0) {
                    return this.$message.error("老师已经打分，不能再上传文件")
                }
                const fileName = file.name; // 获取文件名  
                const fileExtension = fileName.split('.').pop().toLowerCase(); // 获取文件后缀名，并转换为小写  
                // 如果这个后缀名不是.java就停止上传
                if (fileExtension === "txt") {
                    return true
                }
                this.$message.error("文件格式不正确")
                return false; // 阻止文件上传，直到其他参数被添加到 Form 表单中。  
            },
            handleSuccess(response, file, fileList) {
                if(response.code===201){
                    return this.$message.error("已经超过答题时间")
                }
                if(response.code===202){
                    return this.$message.error("老师已经打分")
                }
                if(response.code===200){
                    this.getSubmiss()
                    return this.$message.success("上传成功")
                }
            },

            // 获取该题目是否已经上传过文件
            async getSubmiss() {
                const { data: res } = await this.$axios.get('/getIsUpload', {
                    params: {
                        workId: this.workId,//试卷id
                        userId: this.userId,
                        number: this.workTest.fileUploadNumber // 题目个数
                    }
                })
                if (res.code === 200) {
                    // -2 表示未提交 ， -1表示未批改 其他分数可以正常显示
                    this.scores = res.data
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .title {
        h3 {
            text-align: center;
            font-size: 25px;
        }
        p {
            text-align: right;
            margin-right: 100px;
            .scores{
                font-size: 30px;
                sapn{
                    color: red;
                }
            }
        }
    }

    .zhuyi {
        font-size: 18px;
        margin: 10px 70px 30px;
    }

    .baby {
        border: 1px solid black;
        padding: 10px 10px;
        margin: 10px 70px;

        .el-button {
            margin-left: 10px;
        }
    }

    .outTime {
        margin: 0 70px;
        color: red;
    }

    .notAnswer {
        color: #60775e;
        font-size: 13px;
    }
</style>